<template>
  <j-modal
    :title="title"
    :width="width"
    :visible="visible"
    switchFullscreen
    @ok="handleOk"
    :okButtonProps="{ class:{'jee-hidden': disableSubmit} }"
    @cancel="handleCancel"
    cancelText="关闭">
    <a-form-model ref="form" v-bind="layout" :model="model" :rules="validatorRules">
      <a-tabs default-active-key="1">
        <a-tab-pane key="1" tab="基本信息">
          <a-row>
            <a-col :span="24">
              <a-form-model-item label="商品分类">
                <a-select v-model="model.categoryCode" placeholder="请选择商品分类">
                  <a-select-option value="">请选择</a-select-option>
                  <a-select-option v-for="(c,index) in categoryList" :value="c.key">{{ c.label }}
                  </a-select-option>
                </a-select>
              </a-form-model-item>
            </a-col>
            <a-col :span="24">
              <a-form-model-item label="正方形图片">
                <j-image-upload :isMultiple="false" v-model="model.goodsImg"></j-image-upload>
                <div class="ant-form-explain">注：仅支持图片格式且文件大小500K以内，图片尺寸200X200px为最佳。</div>
              </a-form-model-item>
            </a-col>
            <a-col :span="24">
              <a-form-model-item label="商品名称" required prop="goodsName">
                <a-input v-model="model.goodsName" placeholder="请输入商品名称"></a-input>
                <div class="ant-form-explain">注：商品名称，添加后不可更改，最佳长度6个字符以内。</div>
                <div class="ant-form-explain">注：商品名称，编辑模式下不可更改。</div>
              </a-form-model-item>
            </a-col>
            <a-col :span="24">
              <a-form-model-item label="商品简短描述" required prop="goodsBrief">
                <a-textarea row="3" placeholder="例如 顺丰快递 又快又好" v-model="model.goodsBrief" />
                <div class="ant-form-explain">注：该描述一般会高亮出现在商品名称后面，20字符以内。</div>
              </a-form-model-item>
            </a-col>
            <a-col :span="24">
              <a-form-model-item label="价格" help="单位：元" required prop="shopPrice">
                <a-input-number v-model="model.shopPrice" placeholder="请输入价格"
                                style="width: 100%" />
              </a-form-model-item>
            </a-col>
            <a-col :span="24">
              <a-form-model-item label="划线价格" help="单位：元" required prop="marketPrice">
                <a-input-number v-model="model.marketPrice" placeholder="请输入划线价格"
                                style="width: 100%" />
                <div class="ant-form-explain">注：划线价格，不填则不显示</div>
              </a-form-model-item>
            </a-col>
            <a-col :span="24">
              <a-form-model-item label="商品功效" required prop="effect">
                <a-textarea row="3" placeholder="请输入商品功效" v-model="model.effect" />
                <div class="ant-form-explain">注：10字符以内。例如 治疗高血压等表述，用于定向推送,不会显示给客户查看</div>
              </a-form-model-item>
            </a-col>
            <a-col :span="24">
              <a-form-model-item label="用法说明" required prop="usageDesc">
                <a-textarea row="3" placeholder="请输入用法说明" v-model="model.usageDesc" />
                <div class="ant-form-explain">注：介绍如何使用</div>
              </a-form-model-item>
            </a-col>
            <a-col :span="24">
              <a-form-model-item label="商品说明" >
                <a-textarea row="3" placeholder="请输入商品说明" v-model="model.drugDesc" />
                <div class="ant-form-explain">注：例如药品，介绍主治功能</div>
              </a-form-model-item>
            </a-col>
            <a-col :span="24">
              <a-form-model-item label="商品关键字" required prop="keywords">
                <a-textarea row="3" placeholder="例如 茶料 保健" v-model="model.keywords" />
                <div class="ant-form-explain">注：12字符以内。</div>
              </a-form-model-item>
            </a-col>
          </a-row>
        </a-tab-pane>
        <a-tab-pane key="2" tab="商品详情" force-render>
          <a-row>
            <a-col span="13" class="goods-info-edit-warp">
              <div class="add-item">
                <span>建议图片宽度为 480px≤宽度≤1500px，高度为 0<图片高度≤2500px。图片大小≤500KB</span>
              </div>
              <j-image-upload :isMultiple="true" v-model="model.goodsDesc" @success="handleUploadSuccess"
                              @del="handleImageDel"
              ></j-image-upload>
            </a-col>
            <a-col span="6" style="margin-left: 50px" class="goods-detail-preview-warp">
              <div class="preview-warp" v-if="goodsDescList.length==0">商品描述预览区域</div>
              <div class="desc-pic-item" v-for="dec in goodsDescList">
                <img :src="dec.pic" v-if="dec.type=='pic'" />
              </div>
            </a-col>
            <!--            <a-modal :visible="previewVisible" :footer="null" @cancel="handleCancel">-->
            <!--              <img alt="example" style="width: 100%" :src="previewImage" />-->
            <!--            </a-modal>-->
          </a-row>
        </a-tab-pane>
        <a-tab-pane key="3" tab="商品属性">
          <a-row>
            <a-col :span="24">
              <a-form-model-item label="商品库存数量" help="商品库存数量，默认：无限制">
                <a-input-number v-model="model.goodsNumber" placeholder="请输入商品库存数量，默认：无限制" style="width: 100%" />
              </a-form-model-item>
            </a-col>
            <a-col :span="24">
              <a-form-model-item label="商品报警数量" help="商品报警数量，默认：不报警">
                <a-input-number v-model="model.warnNumber" placeholder="请输入商品报警数量，默认：不报警" style="width: 100%" />
              </a-form-model-item>
            </a-col>
          </a-row>
        </a-tab-pane>
      </a-tabs>

    </a-form-model>
  </j-modal>
</template>

<script>

import JFormContainer from '@comp/jeecg/JFormContainer'
import JDate from '@comp/jeecg/JDate'
import JImageUpload from '@comp/jeecg/JImageUpload'
import JCheckbox from '@comp/jeecg/JCheckbox'
import JSearchSelectTag from '@comp/dict/JSearchSelectTag'
import JEditor from '@comp/jeecg/JEditor'
import { getAction, httpAction } from '@api/manage'

export default {
  name: 'OrdCpInfoModal',
  components: {
    JFormContainer,
    JDate,
    JImageUpload,
    JCheckbox,
    JSearchSelectTag,
    JEditor
  },
  data() {
    return {
      title: '',
      width: 1280,
      visible: false,
      disableSubmit: false,
      layout: {
        labelCol: { span: 4 },
        wrapperCol: { span: 14 }
      },
      model: {
        goodsDesc: ''
      },
      fileList: [],
      cpExtModel: {},//商品扩展信息
      categoryList: [],
      labelCol: {
        xs: { span: 24 },
        sm: { span: 5 }
      },
      wrapperCol: {
        xs: { span: 24 },
        sm: { span: 16 }
      },
      confirmLoading: false,
      validatorRules: {
        goodsName: [{ required: true, message: '请输入商品名称!' }],
        shopPrice: [{ required: true, message: '请输入价格!' }],
        marketPrice: [{ required: true, message: '请输入市场价格!' }],
        keywords: [{ required: true, message: '请输入商品关键字!' }],
        goodsBrief: [{ required: true, message: '请输入简短描述!' }],
        usageDesc: [{ required: true, message: '请输入使用说明!' }],
        goodsNumber: [{ required: true, message: '请输入商品库存数量!' }],
        effect: [{ required: true, message: '请输入商品功效!' }]
      },
      url: {
        add: '/shop/goods',
        edit: '/shop/goods',
        queryById: '/ord/ordCpInfo/queryById',
        categoryList: '/shop/category/selectList',
        queryExtByCpId: '/ord/ordCpInfo/queryExtByCpId'
      },
      cpType: 0,
      goodsDescList: []
    }
  },
  created() {
    this.showCategory()
  },
  methods: {
    add(cpType) {
      this.cpType = cpType
      const record = { cpType: cpType }
      this.edit(record)
    },
    edit(record) {
      this.visible = true
      if (record.categoryCode == '0') {
        record.categoryCode = ''
      }
      this.model = Object.assign({}, record)
      if (record.goodsDescList) {
          this.goodsDescList = record.goodsDescList
      }
    },
    close() {
      this.$emit('close')
      this.visible = false
    },
    handleOk() {
      const that = this
      // 触发表单验证
      this.$refs.form.validate(valid => {
        if (valid) {
          that.confirmLoading = true
          let httpurl = ''
          let method = ''
          if (!this.model.id) {
            httpurl += this.url.add
            method = 'post'
          } else {
            httpurl += this.url.edit
            method = 'put'
          }
          that.model.goodsDescList = this.goodsDescList
          httpAction(httpurl, this.model, method).then((res) => {
            if (res.success) {
              that.$message.success(res.message)
              that.$emit('ok')
              that.close()
            } else {
              that.$message.warning(res.message)
            }
          }).finally(() => {
            that.confirmLoading = false
          })
        }
      })
    },
    handleUploadSuccess(path) {
      this.goodsDescList.push({ 'type': 'pic', 'pic': path })
    },
    handleImageDel(url) {
      for (let i = 0; i < this.goodsDescList.length; i++) {
        const goodsDesc = this.goodsDescList[i]
        if (goodsDesc.pic.indexOf(url)>0) {
          this.goodsDescList.splice(i, 1)
          return
        }
      }
    },
    handleCancel() {
      this.close()
    },
    showCategory() {
      getAction(this.url.categoryList).then((res) => {
        if (res.success) {
          this.categoryList = res.result
        }
      })
    }
  }
}
</script>

<style>
.goods-info-edit-warp {
  flex: 1;
  padding: 15px;
  border: 1px solid #eee;
  box-sizing: border-box;
  height: 750px;
}

.goods-detail-preview-warp {
  width: 375px;
  overflow-y: auto;
  height: 750px;
  border: 1px solid #eee;
}

.goods-detail-preview-warp .desc-pic-item img {
  max-width: 100%;
  display: block;
  width: 100%;
}

.goods-detail-preview-warp .preview-warp {
  width: 375px;
  height: 750px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 16px;
  color: #999;
  background-color: #f7f8fa;
}

.add-item {
  transition: all .3s;
  margin-right: 10px;
  display: flex;
  align-items: center;
  background: #0000000f;
  border: 0;
  padding: 5px 20px;
  word-break: keep-all;
  color: #333;
  margin-bottom: 10px;
}
</style>
